<template>
  <div>
    <a-modal
      :visible.sync="visible"
      v-bind="$attrs"
      v-on="$listeners"
      :maskClosable="false"
      :footer="null"
      width="616px"
      :title="model.text"
      wrapClassName="add-modal-container"
      @cancel="closeModal()"
    >
      <a-form-model ref="ruleForm" :model="form" :rules="rules">
        <!-- 字典名称 -->
        <a-form-model-item
          ref="dictTypeDesc"
          label="字典名称"
          prop="dictTypeDesc"
        >
          <a-input
            v-model="form.dictTypeDesc"
            placeholder="请输入字典名称"
            disabled
          />
        </a-form-model-item>
        <!-- 字典类型 -->
        <a-form-model-item
          ref="dictTypeKey"
          label="字典类型"
          prop="dictTypeKey"
        >
          <a-input
            v-model="form.dictTypeKey"
            disabled
            placeholder="请输入字典类型"
          />
        </a-form-model-item>
        <!-- 字典标签 -->
        <a-form-model-item ref="dicDesc" label="字典标签" prop="dicDesc">
          <a-input
            v-model.trim="form.dicDesc"
            placeholder="请输入字典标签"
            :maxLength="200"
          />
        </a-form-model-item>
        <!-- 排序 -->
        <a-form-model-item ref="sort" label="排序" prop="sort">
          <a-input
            v-model="form.sort"
            type="number"
            placeholder="请输入排序"
            :maxLength="10"
          />
        </a-form-model-item>
        <!-- 备注 -->
        <a-form-model-item ref="remark" label="备注" prop="remark">
          <a-input
            v-model="form.remark"
            placeholder="请输入备注"
            type="textarea"
            style="height: 100px"
            :maxLength="255"
          />
        </a-form-model-item>
      </a-form-model>
      <div class="form-footer flex">
        <a-button type="default" @click="closeModal()">取消 </a-button>
        <a-button type="primary" :loading="loading" @click="submit">
          提交
        </a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { getDictAdd } from "@/api/user-center/dictionaryManage.js";
import { notificationTip } from "@/utils";
export default {
  name: "dicAddModal",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    model: {
      type: Object,
      default: {},
    },
  },
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          this.getDetail();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      loading: false,
      form: {
        //字典名称
        dictTypeDesc: "",
        //字典类型
        dictTypeKey: "",
        //字典标签
        dicDesc: "",
        //字典键值
        dictKey: "",
        //排序
        sort: 0,
        //备注
        remark: "",
      },
      rules: {
        dictTypeDesc: [
          { required: true, message: "请输入字典名称", trigger: "blur" },
        ],
        dictTypeKey: [
          { required: true, message: "请选择字典类型", trigger: "change" },
        ],
        dicDesc: [
          { required: true, message: "请输入字典标签", trigger: "blur" },
        ],
        sort: [{ required: true, message: "请输入排序", trigger: "blur" }],
      },
    };
  },
  mounted() {},
  methods: {
    getDetail() {
      let { dictTypeKey, dictTypeDesc } = this.$route.query;
      let { id, dicDesc, dictKey, sort, remark } = this.model;
      //字典名称
      this.form.dictTypeDesc = dictTypeDesc;
      //字典类型
      this.form.dictTypeKey = dictTypeKey;
      if (id) {
        //字典标签
        this.form.dicDesc = dicDesc;
        //字典键值
        this.form.dictKey = dictKey;
        //排序
        this.form.sort = sort;
        //备注
        this.form.remark = remark;
      } else {
        //字典标签
        this.form.dicDesc = "";
        //字典键值
        this.form.dictKey = "";
        //排序
        this.form.sort = 0;
        //备注
        this.form.remark = "";
      }
    },
    //提交
    submit() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          let { form } = this;
          let { id } = this.model;
          let formJson = {
            //字典标签
            dicDesc: form.dicDesc,
            //字典键值
            dictKey: form.dictTypeKey,
            //排序
            sort: form.sort,
            //备注
            remark: form.remark,
          };
          if (id) {
            formJson.id = id;
          }
          getDictAdd(formJson)
            .then((res) => {
              let msg = "新增字典数据成功！";
              if (id) {
                msg = "编辑字典类别成功！";
              }
              notificationTip("success", msg);
              this.closeModal();
              this.$parent.getTableData();
            })
            .catch((_) => {})
            .finally((_) => {
              this.loading = false;
            });
        }
      });
    },

    //关闭弹窗
    closeModal() {
      this.resetForm();
      this.$emit("update:visible", false);
    },

    //重置表单
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.add-modal-container {
  .ant-modal-body {
    padding: 20px 60px;
    .ant-form-item {
      .flex();
      .ant-form-item-label {
        flex-shrink: 0;
        width: 80px;
      }
      .ant-form-item-control-wrapper {
        flex: 1;
      }
    }
    .form-footer {
      justify-content: center;
    }
  }
}
</style>
